<!DOCTYPE html>
<html>
<head>
    <title>U-tube Manometer Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physics-diagram" width="400" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physics-diagram');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '30px "KaiTi", "STKaiti", serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // U-Tube Geometry
        const centerX = 200;
        const tubeTopY = 80;
        const bendCenterY = 320;
        const bendRadius = 70; // Radius to the center of the tube
        const tubeWidth = 40; // Total width of the tube

        // --- Draw U-Tube Walls ---
        // Outer wall
        ctx.beginPath();
        ctx.moveTo(centerX - bendRadius - tubeWidth / 2, tubeTopY);
        ctx.lineTo(centerX - bendRadius - tubeWidth / 2, bendCenterY);
        ctx.arc(centerX, bendCenterY, bendRadius + tubeWidth / 2, Math.PI, 0);
        ctx.lineTo(centerX + bendRadius + tubeWidth / 2, tubeTopY);
        ctx.stroke();

        // Inner wall
        ctx.beginPath();
        ctx.moveTo(centerX - bendRadius + tubeWidth / 2, tubeTopY);
        ctx.lineTo(centerX - bendRadius + tubeWidth / 2, bendCenterY);
        ctx.arc(centerX, bendCenterY, bendRadius - tubeWidth / 2, Math.PI, 0);
        ctx.lineTo(centerX + bendRadius - tubeWidth / 2, tubeTopY);
        ctx.stroke();
        
        // Seal the right arm
        ctx.beginPath();
        ctx.moveTo(centerX + bendRadius - tubeWidth / 2, tubeTopY);
        ctx.lineTo(centerX + bendRadius + tubeWidth / 2, tubeTopY);
        ctx.stroke();

        // --- Draw Mercury and Labels ---
        const initialLevelY = 160;
        const finalRightLevelY = 220;

        // Dashed line indicating mercury in the bend
        ctx.beginPath();
        ctx.setLineDash([7, 4]);
        ctx.arc(centerX, bendCenterY, bendRadius, Math.PI, 2*Math.PI);
        ctx.stroke();
        ctx.setLineDash([]);

        // "水银" (Mercury) label
        ctx.fillText('水银', centerX, bendCenterY + 40);

        // Trapped gas area (shaded rectangle)
        ctx.fillStyle = '#E0E0E0'; // Light gray
        ctx.fillRect(centerX + bendRadius - tubeWidth/2 + ctx.lineWidth/2, tubeTopY, tubeWidth - ctx.lineWidth, finalRightLevelY-tubeTopY);
        ctx.fillStyle = 'black';
        
        // Final mercury level in the right arm
        ctx.beginPath();
        ctx.moveTo(centerX + bendRadius - tubeWidth / 2, finalRightLevelY);
        ctx.lineTo(centerX + bendRadius + tubeWidth / 2, finalRightLevelY);
        ctx.stroke();

        // "等高" (Equal height) line and label
        ctx.beginPath();
        ctx.setLineDash([10, 5]);
        ctx.moveTo(centerX - bendRadius - tubeWidth / 2 - 10, initialLevelY);
        ctx.lineTo(centerX + bendRadius + tubeWidth / 2 + 10, initialLevelY);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillText('等高', centerX, initialLevelY - 25);
        
        // h1 dimension line and label
        const h1_x_pos = centerX + bendRadius + tubeWidth / 2 + 20;
        ctx.beginPath();
        ctx.moveTo(h1_x_pos, initialLevelY);
        ctx.lineTo(h1_x_pos, finalRightLevelY);
        // Arrowheads
        ctx.moveTo(h1_x_pos, initialLevelY);
        ctx.lineTo(h1_x_pos - 5, initialLevelY + 8);
        ctx.moveTo(h1_x_pos, initialLevelY);
        ctx.lineTo(h1_x_pos + 5, initialLevelY + 8);
        ctx.moveTo(h1_x_pos, finalRightLevelY);
        ctx.lineTo(h1_x_pos - 5, finalRightLevelY - 8);
        ctx.moveTo(h1_x_pos, finalRightLevelY);
        ctx.lineTo(h1_x_pos + 5, finalRightLevelY - 8);
        ctx.stroke();

        // h1 label text
        ctx.font = 'italic 28px "Times New Roman"';
        ctx.fillText('h', h1_x_pos + 15, (initialLevelY + finalRightLevelY) / 2);
        ctx.font = 'italic 18px "Times New Roman"';
        ctx.fillText('1', h1_x_pos + 23, (initialLevelY + finalRightLevelY) / 2 + 8);

    </script>
</body>
</html>